<template>
  <section class="flex-row-center">
    <div class="flex-col-center ox o" @click="goRedEnvelope">
      <p v-if="$store.state.token" class="p red-envelope"><strong class="s">0</strong>个</p>
      <div v-else class="div"><span class="iconfont icon-hongbao base-font-size"></span></div>
      <strong class="p">红包</strong>
    </div>
    <div class="flex-col-center ox" @click="goGoldCoin">
      <p v-if="$store.state.token" class="p gold-coin"><strong class="s">0</strong>个</p>
      <div v-else class="div" style="background-color: #6AC20B;"><span class="iconfont icon-jinbi base-font-size"></span></div>
      <strong class="p">金币</strong>
    </div>
  </section>
</template>

<script>
export default {
  name: 'mine-section',
  methods: {
    goRedEnvelope() {
      if(!this.$store.state.token) {
        return this.$router.replace('/login')
      }
      this.$router.push('/redenvelope')
    },
    goGoldCoin() {
      if(!this.$store.state.token) {
        return this.$router.replace('/login')
      }
      this.$router.push('/goldcoin')
    }
  },
  created() {
	  console.log(this.$store.state.token)
  }
}
</script>

<style scoped>
  .ox {
    flex: 1;
    padding: 30px;
    background-color: #fff;
  }
  .p {
    font-size: 26px;
  }
  .red-envelope {
    color: #ff5f3e;
    font-size: 26px
  }
  .gold-coin {
    color: #6ac20b;
    font-size: 26px;
  }
  .s {
    font-size: 38px;
  }
  .div {
    height: 40px;
    width: 40px;
    background-color: #F9355E;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
  }
  .iconfont {
    color: #fff;
  }
  .o {
    border-right: 1px solid #d8d8d8;
  }
</style>
